<template>
  <div class="goodsfen">
    <el-row class="mb-4">
      <el-button type="success" @click="addCategory">
        <el-icon><Plus /></el-icon>
        新增上级分类
      </el-button>
    </el-row>
    
    <el-table
      v-loading="loading"
      :data="tableData"
      style="width: 100%"
      empty-text="暂无数据"
      row-key="id"
    >
      <el-table-column label="下级分类" type="expand" width="100">
        <template #default="{row}">
          <div class="sub-category-container">
            <div class="sub-category-header">
              <span class="sub-header-id">分类ID</span>
              <span class="sub-header-name">分类名称</span>
              <span class="sub-header-actions">操作</span>
            </div>
            <div v-if="row.categories && row.categories.length > 0" class="sub-categories">
              <div v-for="category in row.categories" :key="category.id" class="sub-row">
                <span class="sub-id">{{ category.id }}</span>
                <span class="sub-name">{{ category.name }}</span>
                <div class="sub-actions">
                  <el-button type="primary"  size="small" class="mr-2">
                    <el-icon><Edit /></el-icon>
                    修改
                  </el-button>
                  <el-button type="danger"  size="small">
                    <el-icon><Delete /></el-icon>
                    删除
                  </el-button>
                </div>
              </div>
            </div>
          </div>
        </template>
      </el-table-column>

      <el-table-column
        prop="id"
        label="ID"
        width="100"
      />

      <el-table-column
        label="icon"
        width="120"
      >
        <template #default="{row}">
          <span v-html="row.value" class="icon-display"></span>
        </template>
      </el-table-column>

      <el-table-column
        label="操作"
        width="200"
      >
        <template #default="{}">
          <el-button-group>
            <el-button type="primary"  size="small" class="mr-2">
              <el-icon><Edit /></el-icon>
              修改
            </el-button>
            <el-button type="danger"  size="small">
              <el-icon><Delete /></el-icon>
              删除
            </el-button>   
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { Edit, Delete, Plus } from "@element-plus/icons-vue";
import { onMounted, ref } from "vue";
import request from '@/utils/request' 

const loading = ref(false)
const tableData = ref([])

// 获取一级分类数据
const getMainCategories = async () => {
  loading.value = true
  try {
    const res = await request({
      url: '/api/icon',
      method: 'get'
    })
    
    if (res.code === "200" && res.data) {
      tableData.value = res.data.map(item => ({
        ...item,
        categories: item.categories || []
      }))
    }
  } catch(error) {
    console.error('获取一级分类失败：', error)
    tableData.value = []
  } finally {
    loading.value = false
  }
}

// 获取单个分类详情
const getCategoryDetail = async (id) => {
  try {
    const res = await request({
      url: `/api/icon/${id}`,
      method: 'get'
    })
    return res.data
  } catch(error) {
    console.error('获取分类详情失败：', error)
    return null
  }
}
getCategoryDetail
// 获取所有二级分类
const getSubCategories = async () => {
  try {
    const res = await request({
      url: '/api/category',
      method: 'get'
    })
    return res.data || []
  } catch(error) {
    console.error('获取二级分类失败：', error)
    return []
  }
}
getSubCategories

onMounted(() => {
  getMainCategories()
})
</script>

<style scoped>
.goodsfen {
  padding: 20px;
}

.icon-display {
  font-family: 'iconfont';
  font-size: 24px;
  color: #409EFF;
}

.el-button-group {
  display: flex;
  gap: 5px;
}

.el-button + .el-button {
  margin-left: 0;
}

/* 二级分类样式 */
.sub-category-container {
  padding: 10px 20px;
  background: #f5f7fa;
  border-radius: 4px;
  margin: 10px;
}

.sub-category-header {
  display: flex;
  align-items: center;
  padding: 8px 0;
  border-bottom: 2px solid #ebeef5;
  font-weight: 600;
}

.sub-header-id {
  width: 80px;
}

.sub-header-name {
  width: 200px;
  padding-left: 20px;
}

.sub-header-actions {
  margin-left: auto;
}

.sub-categories {
  padding: 0;
}

.sub-row {
  display: flex;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #ebeef5;
}

.sub-row:last-child {
  border-bottom: none;
}

.sub-id {
  width: 80px;
  font-weight: 500;
}

.sub-name {
  width: 200px;
  padding-left: 20px;
}

.sub-actions {
  margin-left: auto;
}

</style>    